import React from 'react'
import { useNavigate } from 'react-router';
import { Layout ,Dropdown,Menu,Avatar } from 'antd';
import { connect } from 'react-redux';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined

} from '@ant-design/icons';
const { Header } = Layout;

function TopHeader(props) {
  const navigate = useNavigate();
  // const [collapsed, setcollapsed] = useState(false);
  const changeCollapsed = () => {
    props.changeCollapsed()
  }
  const {role:{roleName},username} = JSON.parse(localStorage.getItem("token"))


  const menu = (
    <Menu>
      <Menu.Item>
          {roleName}
      </Menu.Item>
      <Menu.Item danger onClick={
        ()=>{
          localStorage.removeItem('token')
          navigate('/login')
        }
      }>退出</Menu.Item>
    </Menu>
  );
  

  return (
    <Header className="site-layout-background" style={{ padding: '0 24px' }}>
      {
        props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
      }
      <div style={{ float: 'right' ,margin:'0 20px'}}>
        <span style={{margin : '20px'}}>
          欢迎{username}回来
        </span>
        <Dropdown overlay={menu}>
            <span><Avatar shape="square" size='large' icon={<UserOutlined />} /></span>
        </Dropdown>
      </div>
    </Header>
  )
}
const mapStateToProps = ({CollApsedReducer:isCollapsed})=>{
  return {
    isCollapsed
  }
}
const mapDispatchToProps = {
  changeCollapsed(){
    return{
      type:'change_collapsed'
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(TopHeader)